<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户分页管理系统 - JDK8兼容版</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e8e8e8;
        }
        th {
            background-color: #fafafa;
            font-weight: 500;
            color: #555;
        }
        tr:hover {
            background-color: #f9f9f9;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-top: 25px;
        }
        .pagination button {
            min-width: 80px;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .pagination button:hover:not(:disabled) {
            color: #1890ff;
            border-color: #1890ff;
        }
        .pagination button:disabled {
            color: #ccc;
            cursor: not-allowed;
        }
        .page-info {
            min-width: 100px;
            text-align: center;
            color: #666;
        }
        .status-bar {
            margin-bottom: 15px;
            text-align: right;
            color: #888;
            font-size: 13px;
        }
        .loading {
            text-align: center;
            padding: 30px;
            color: #1890ff;
        }
        .error-message {
            color: #f5222d;
            text-align: center;
            padding: 20px;
            background: #fff1f0;
            border-radius: 4px;
            margin: 10px 0;
        }
        .btn-retry {
            margin-left: 10px;
            padding: 4px 8px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户分页管理系统</h1>
        <div class="status-bar" id="statusBar">系统准备就绪</div>
        
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="dataBody">
                <tr>
                    <td colspan="4" class="loading">正在加载数据...</td>
                </tr>
            </tbody>
        </table>
        
        <div class="pagination">
            <button id="firstBtn" disabled>首页</button>
            <button id="prevBtn" disabled>上一页</button>
            <span class="page-info" id="pageInfo">1/1</span>
            <button id="nextBtn" disabled>下一页</button>
            <button id="lastBtn" disabled>尾页</button>
        </div>
    </div>

    <script>
        // 配置项
        const config = {
            apiBase: 'http://localhost:8100/api/users',
            defaultPageSize: 10
        };
        
        // 状态管理
        const state = {
            currentPage: 1,
            totalPages: 1,
            totalItems: 0,
            isLoading: false,
            navigation: {}
        };
        
        // DOM元素
        const elements = {
            dataBody: document.getElementById("dataBody"),
            pageInfo: document.getElementById("pageInfo"),
            prevBtn: document.getElementById("prevBtn"),
            nextBtn: document.getElementById("nextBtn"),
            firstBtn: document.getElementById("firstBtn"),
            lastBtn: document.getElementById("lastBtn"),
            statusBar: document.getElementById("statusBar")
        };
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadData(state.currentPage);
            setupEventListeners();
        });
        
        // 事件监听
        function setupEventListeners() {
            elements.prevBtn.addEventListener('click', () => {
                if (state.navigation.prePage) {
                    loadData(state.navigation.prePage);
                }
            });
            
            elements.nextBtn.addEventListener('click', () => {
                if (state.navigation.nextPage) {
                    loadData(state.navigation.nextPage);
                }
            });
            
            elements.firstBtn.addEventListener('click', () => {
                loadData(1);
            });
            
            elements.lastBtn.addEventListener('click', () => {
                loadData(state.navigation.lastPage);
            });
        }
        
        // 加载数据
        async function loadData(pageNum) {
            if (state.isLoading) return;
            
            state.isLoading = true;
            updateUI();
            showLoading();
            
            try {
                const apiUrl = `${config.apiBase}?pageNum=${pageNum}&pageSize=${config.defaultPageSize}`;
                updateStatus(`正在加载第 ${pageNum} 页数据...`);
                
                const response = await fetch(apiUrl);
                
                if (!response.ok) {
                    const errorData = await response.json().catch(() => ({}));
                    throw new Error(errorData.message || `HTTP错误 ${response.status}`);
                }
                
                const result = await response.json();
                console.debug('API响应:', result);
                
                if (!result.success) {
                    throw new Error(result.message || "API返回失败状态");
                }
                
                // 更新状态
                state.currentPage = pageNum;
                state.totalItems = result.total;
                state.totalPages = result.pages;
                state.navigation = result.navigation || {};
                
                // 渲染数据
                renderTable(result.data);
                updateStatus(`成功加载 ${result.data.length} 条记录`);
                
            } catch (error) {
                console.error('加载失败:', error);
                showError(error.message);
                updateStatus(`加载失败: ${error.message}`);
            } finally {
                state.isLoading = false;
                updateUI();
            }
        }
        
        // 渲染表格
        function renderTable(userList) {
            if (!userList || userList.length === 0) {
                elements.dataBody.innerHTML = `
                    <tr>
                        <td colspan="4" style="text-align:center;color:#999;">
                            没有找到用户数据
                        </td>
                    </tr>
                `;
                return;
            }
            
            elements.dataBody.innerHTML = userList.map(user => `
                <tr>
                    <td>${user.id || 'N/A'}</td>
                    <td>${user.name || '匿名用户'}</td>
                    <td>${user.email || '无邮箱'}</td>
                    <td>
                        <button class="btn-action" onclick="editUser(${user.id})">编辑</button>
                        <button class="btn-action" onclick="deleteUser(${user.id})">删除</button>
                    </td>
                </tr>
            `).join('');
        }
        
        // 显示加载状态
        function showLoading() {
            elements.dataBody.innerHTML = `
                <tr>
                    <td colspan="4" class="loading">
                        <div class="spinner">⌛ 数据加载中...</div>
                    </td>
                </tr>
            `;
        }
        
        // 显示错误
        function showError(message) {
            elements.dataBody.innerHTML = `
                <tr>
                    <td colspan="4" class="error-message">
                        ❌ ${message}
                        <button class="btn-retry" onclick="retryLoading()">重试</button>
                    </td>
                </tr>
            `;
        }
        
        // 更新状态栏
        function updateStatus(message) {
            elements.statusBar.textContent = message;
        }
        
        // 更新UI状态
        function updateUI() {
            // 分页信息
            elements.pageInfo.textContent = `${state.currentPage}/${state.totalPages}`;
            
            // 按钮状态
            elements.prevBtn.disabled = state.isLoading || !state.navigation.prePage;
            elements.nextBtn.disabled = state.isLoading || !state.navigation.nextPage;
            elements.firstBtn.disabled = state.isLoading || state.currentPage === 1;
            elements.lastBtn.disabled = state.isLoading || state.currentPage === state.totalPages;
        }
        
        // 重试加载
        function retryLoading() {
            loadData(state.currentPage);
        }
        
        // 示例操作函数
        function editUser(id) {
            alert(`[示例] 编辑用户 ID: ${id}`);
            // 实际项目中这里打开模态框或跳转页面
        }
        
        function deleteUser(id) {
            if (confirm(`确定要删除用户 ${id} 吗？`)) {
                console.log(`[示例] 删除用户: ${id}`);
                // 实际项目中这里调用删除API
            }
        }
    </script>
</body>
</html>